<template>
	<view class="container">
		<view class="uni-form-item uni-column item">
			<view class="example-body" style="">
				<view class="uni-form-item uni-column">
					<view v-for="(tmp,index) in skuArray" :key="index">
						<view class="uni-flex uni-row" style="margin-top: 10rpx;">
							<view class="title" style="width: 168rpx;">规格名称</view>
							<view class="text" style="-webkit-flex: 1;flex: 1;"><input class="uni-input" name="nickname" placeholder="请输入规格名称"
								 :data-src="index" @input="changeSkuName" :value="tmp.name" /></view>
							<view class="text" style="width: 100rpx;">
								<image class="" style="position: relative;width: 60rpx;height: 60rpx;top:10% ;left:20%" :src="skuDel" :data-src="index"
								 @tap="delSku"></image>
							
							</view>
						</view>
						<view class="uni-flex uni-row" style="margin-top: 10rpx;">
							<view class="title" style="width: 168rpx;">产品属性</view>
							<view class="text" style="-webkit-flex: 1;flex: 1;"><input class="uni-input" name="nickname" placeholder="多个产品属性以,隔开"
								 :data-src="index" @input="changeSkuPro" :value="tmp.pro" /></view>
							<view class="text" style="width: 100rpx;"></view>
						</view>
					</view>
					<view class="uni-flex uni-row" style="margin-top: 20rpx;">
						<view class="title" style="width: 168rpx;">规格设置</view>
						<view class="text" style="-webkit-flex: 1;flex: 1;"><button class="mini-btn" type="default" size="mini" style="height: 60rpx;margin-top: 5rpx;"
							 @click="addSku">添加规格</button></view>
						<view class="text" style="width: 100rpx;"></view>
					</view>
				</view>
			
				<view v-if="skuArray.length>0" v-for="(tmp,index) in skuArray" :key="index">
					<view class="uni-form-item uni-column rows" v-if="tmp.name!=''">
						<view class="title topName"><text class="uni-form-item__title">{{ tmp.name }}</text></view>
						
						<view class="uni-list listchind" v-for="(t,i) in tmp.spec" :key="i">
								<view class="title"><text class="uni-form-item__title">{{ t.name }}</text></view>
							<view class="uni-list-cell">
								
								
								<view class="uni-list-cell-left">
									价格
								</view>
								<view class="uni-list-cell-db">
									<view class="uni-input"><input class="uni-input2"   type="digit"
										 placeholder="请输入零售价格" :data-src="index"  v-model="t.price" /></view>

								</view>
							</view>
							<view class="uni-list-cell">
								<view class="uni-list-cell-left">
									库存
								</view>
								<view class="uni-list-cell-db">
									<view class="uni-input"><input class="uni-input2"   type="digit" placeholder="请输入商品库存"
										 :data-src="index"    v-model="t.stock"/></view>

								</view>
							</view>
							<view class="uni-list-cell" >
								<view class="uni-list-cell-left">
									重量
								</view>
								<view class="uni-list-cell-db">
									<view class="uni-input"><input class="uni-input2"  type="digit" placeholder="请输入重量(Kg)"
										 :data-src="index"  v-model="t.weight"/></view>

								</view>
							</view>
							<view class="uni-list-cell" >
								<view class="uni-list-cell-left">
									成本价格
								</view>
								<view class="uni-list-cell-db">
									<view class="uni-input"><input class="uni-input2"  type="digit"
										 placeholder="请输入成本价格" :data-src="index"  v-model="t.costPrice" /></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn">
				<button class="cancel" type="default" @tap="onTapCancel">取消</button>
				<button class="submit" type="default" @tap="onTapSave">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				skuArray: [],
				skuDetailArray: [],
				skuDel: '../../static/img/del2.png',
				skuRetailPrice: '',
				skuCostPrice: '',
				skuWeight: '',
				skuStock: '',
				skuPro: '',
			}
		},
		onLoad(e) {
	
			let options={"skuArray":[],"skuDetailArray":[]}
		
			let data = options
			this.skuArray = data.skuArray
			this.skuDetailArray = data.skuDetailArray
			this.skuRetailPrice = data.skuRetailPrice
			this.skuStock = data.skuStock
		},
		methods: {
			addSku(e) {
				let tmp = {
					name: '',
					pro: ''
				};
				this.skuArray.push(tmp);
				
			},
			delSku(e) {
				this.skuArray.splice(e.target.dataset.src, 1);
				//this.updateSkuDetail()
			},
			changeSkuName(e) {
				this.skuArray[e.target.dataset.src].name = e.detail.value;
			},
			changeSkuPro(e) {
				if (e.detail.value == '' || e.detail.value == null) {

				} else {
					if (this.skuArray[e.target.dataset.src].name == '' || this.skuArray[e.target.dataset.src].name == null) {
						uni.showToast({
							title: '请填写规格名称',
							icon: 'none'
						});
					}
					//skuDetailArray
					this.skuArray[e.target.dataset.src].pro = e.detail.value;
					let spec=this.skuArray[e.target.dataset.src].pro.split(",")
					spec=spec.filter( (s)=> {
					   return s && s.trim();
					});
					this.skuArray[e.target.dataset.src].spec=[]
	
					Object.keys(spec).map((item)=>{
						this.skuArray[e.target.dataset.src].spec.push(
							{
								'name':spec[item],
								'price':'',
								'stock':'',
								'weight':'',
								'costPrice':''
							}
						)
						
					})
			
					
				}

			},
			
			changeSkuDetailRetail(e) {
				this.skuRetailPrice = '';
				this.skuDetailArray[e.target.dataset.src].retailPrice = e.detail.value;
				let tmp = 0;
				for (let i = 0; i < this.skuDetailArray.length; i++) {
					if (this.skuDetailArray[i].retailPrice == '') {
						tmp = 1;
						break;
					}
				}
				if (tmp == 0) {
					this.skuRetailPrice = Math.min.apply(Math, this.skuDetailArray.map(item => {
						return item.retailPrice
					}));
				}
			},
			changeSkuDetailCost(e) {
				this.skuDetailArray[e.target.dataset.src].costPrice = e.detail.value;
			},
			changeSkuDetailWeight(e) {
				this.skuDetailArray[e.target.dataset.src].weight = e.detail.value;
			},
			changeSkuDetailStock(e) {
				this.skuStock = '';
				this.skuDetailArray[e.target.dataset.src].stock = e.detail.value;
				let tmp = 0;
				for (let i = 0; i < this.skuDetailArray.length; i++) {
					if (this.skuDetailArray[i].stock == '') {
						tmp = 1;
						break;
					}
				}
				if (tmp == 0) {
					this.skuStock = 0;
					for (let item in this.skuDetailArray) {
						this.skuStock = parseInt(this.skuStock) + parseInt(this.skuDetailArray[item].stock);
					}
				}
			},
			changeSkuRetail(e) {
				this.skuRetailPrice = e.detail.value;
			},
			changeSkuWeight(e) {
				this.skuWeight = e.detail.value;
			},
			changeSkuCost(e) {
				this.skuCostPrice = e.detail.value;
			},
			changeSkuStock(e) {
				this.skuStock = e.detail.value;
			},
			changeExpressFee(e) {
				this.expressFee = e.detail.value;
			},
			onTapCancel(){
				uni.navigateBack()
			},
			onTapSave(){
				let gname='规格：'
				for(let item=0;item<=this.skuArray.length;item++){
						for(let i=0;i<=this.skuArray[item].spec.length;i++){
								
								if(this.skuArray[item].spec[i].price==''){
									return uni.showToast({
									    title: this.skuArray[item].spec[i].name+gname+'价格为空',
									  
									});
								}
								if(this.skuArray[item].spec[i].stock==''){
									return uni.showToast({
									    title: this.skuArray[item].spec[i].name+gname+'库存为空',
									  
									});
								}
								
								if(this.skuArray[item].spec[i].weight==''){
									return uni.showToast({
									    title: this.skuArray[item].spec[i].name+gname+'重量为空',
									  
									});
								}
								
								if(this.skuArray[item].spec[i].costPrice==''){
									return uni.showToast({
									    title: this.skuArray[item].spec[i].name+gname+'成本为空',
									  
									});
								}
							
						}
				}
			
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F2F2;
	}
	.rows{
		margin-bottom: 10%;
	}
	.topName{
		border-bottom: 1px solid #000000;
	}
	.listchind{
		margin-top: 2%;
		margin-left: 3%;
		border-bottom: 1px solid #000000;
	}
	.item {
		margin-bottom: 200rpx;
		.uni-input {
		    height: 25px;
		}
	}
	uni-view.uni-flex.uni-row {
	    display: flex;
	    flex-direction: row;
	    font-size: 14px;
	    line-height: 1.8;
	}
	uni-input.uni-input{
		padding: 7px 13px;
		 line-height: 31px;
		  font-size: 14px;
		  background: #FFF;
		  flex: 1;
		  min-height: 1.4em;
		      overflow: hidden;
			
	}
	.container {
		.footer {
			border-top: 1px solid #EDEDED;
			width: 750rpx;
			position: fixed;
			bottom: 0;
			height: 150rpx;
			z-index: 10;
			background-color: #ffffff;
			;

			.btn {
				padding-top: 30rpx;
				margin-right: 40rpx;
				text-align: right;
				display: flex;

				button {
					width: 180rpx;
					font-size: 30rpx;
				}

				button:after {
					border: none;
				}

				button:active {
					opacity: 0.5;
				}

				.cancel {
					display: inline-block;
					margin-right: 20rpx;
					color: red;
					background: #ffffff;
				}

				.submit {
					display: inline-block;
					margin-left: 20rpx;
					background: red;
					color: #ffffff;
				}
			}
		}
	}
</style>
